<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css">
  <link rel="stylesheet" href="/lib/public.css" media="all">
</head>
<body>

<div class="layuimini-container">
  <div class="layuimini-main">

    <form class="layui-form" action="">
      <div class="layui-form-item">
        <label class="layui-form-label">订单id</label>
        <div class="layui-input-block">
          <input type="text" name="id" id="id"  autocomplete="off" class="layui-input" readonly>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">创建时间</label>
        <div class="layui-input-block">
          <input type="text" name="createTime"   autocomplete="off" class="layui-input" disabled>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">用户</label>
        <div class="layui-input-block">
          <input type="text" name="user"   autocomplete="off" class="layui-input" disabled>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">地址</label>
        <div class="layui-input-block">
          <input type="text" name="addr"  autocomplete="off" class="layui-input" disabled>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
          <input type="radio" name="status" value="0" title="未支付" checked>
          <input type="radio" name="status" value="1" title="已支付" >
          <input type="radio" name="status" value="2" title="已发货" >
          <input type="radio" name="status" value="3" title="已收货" >
          <input type="radio" name="status" value="4" title="退款" >
          <input type="radio" name="status" value="5" title="退货中" >
          <input type="radio" name="status" value="6" title="已退款" >
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>

  </div>
</div>

<script src="/lib/layui-v2.6.3/layui.js"></script>
<script>
  //Demo
  layui.use(['form','laytpl','upload', 'element', 'layer'], function(){
    var form = layui.form,
            $=layui.$,
            laytpl=layui.laytpl,
            upload = layui.upload,
            element = layui.element,
            layer = layui.layer;

    let id = sessionStorage.getItem("id");
    $.ajax({
      url:`/api/order/${id}`,
      type:"GET",
      dataType:"JSON",
      success:function (resp) {
        /*layer.msg(resp);*/
        let data = resp.data;
        $("input[name='id']").val(data.id);
        $("input[name='createTime']").val(data.createTime);
        $("input[name='user']").val(data.user.username);
        $("input[name='addr']").val(data.addr.province+data.addr.city+data.addr.town + data.addr.detail);
        $(`input[type='radio'][name=status][value='${data.status}']`).attr("checked",true);

        form.render();
      }
    })


    //提交
    form.on('submit(formDemo)', function(data){
      $.ajax({
        url:"/api/order",
        type: "PUT",
        data: {id:$("#id").val()  ,status: $(`input[type='radio'][name=status]`).val()},
        dataType: "JSON",
        success: function (resp){
          layer.msg(resp.msg,{time: 1000},function (){
            if (resp.code === 10000){
              parent.layer.closeAll("iframe");
            }
          })

        }
      })
      return false;
    });

    form.render();
  });
</script>
</body>
</html>